<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .wrap {
            padding: 8px;
        }

        .list {
            margin-top: 10px;
        }

        .list li {
            height: 40px;
            line-height: 40px;
            text-indent: 10px;
            border: 1px dashed #333;
        }

        .list li+li {
            border-top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h2 id="title">jquery元素获取</h2>
        <ul class="list">
            <div>123123123</div>
            <li class="first">01</li>
            <li>02</li>
            <li class="mid">03</li>
            <li>04</li>
            <li>05</li>
            <li class="last"><span class="sp">06</span></li>
        </ul>
    </div>
</body>
<script>
    // jquery 过滤 => 从集合(jquery对象)中找到满足条件的元素

    // eq(index)   返回集合中对应下标的元素
    // $(".list li").eq(2).css({ background: "red" })
    // $(".list li").eq(-2).css({ background: "red" })


    // first()   返回集合中的第一个元素
    // last()   返回集合中的最后一个元素
    // $(".list li").first().css({ background: "red" })
    // $(".list li").last().css({ background: "red" })

    // hasClass()  判断集合中是否存在给定class名
    // 单元素 => 精确判断
    // 多元素 => 有一个满足条件即可
    console.log($(".list li").eq(0).hasClass("first"));
    console.log($(".list li").hasClass("first"));

    // has(selector)    返回集合中包含 给定元素 的元素
    // 单元素 => 精确判断
    // 多元素 => 有一个满足条件即可
    console.log($(".list li:has(span)"));  // .list li 中含有span的li
    console.log($(".list li").has("span"));


</script>

</html>